<template>
    <div class="front-container">
      <!-- 左右并列区域 -->
      <div class="main-layout">
        <!-- 左边轮播图 -->
        <div class="carousel-wrapper">
          <Carousel />
        </div>

        <!-- 右边热门商品 -->
        <div class="hot-sales-wrapper">
          <HotFruits />
        </div>
      </div>

      <!-- 其他组件 -->
      <Search />
      <OurService />

      <!-- 底部信息 -->
      <div class="bottom-menu-container">
        <div class="bottom-menu-box el-icon-location">地址: 太原理工大学</div>
        <div class="bottom-menu-box el-icon-phone">联系电话: 16634276638</div>
        <div class="bottom-menu-box el-icon-s-comment">邮箱: 123456789@qq.com</div>
      </div>
    </div>
</template>

<script>
import OurService from "./OurService";
import HotSales from "./HotSales";
import Search from "./Search";
import Carousel from "./Carousel";
import AboutUs from "./AboutUs";
import HotFruits from "@/views/FrontPage/HotFruits.vue";

export default {
  components:{
    HotFruits,
    Carousel,
    OurService,
    HotSales,
    Search,
    AboutUs
  },

};
</script>

<style lang="less" scoped>

.bottom-menu-container{
  background-color: #545C64;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  .bottom-menu-box{
    width: 280px;
    color: #ffbc49;
    font-size:20px;
    margin: 0px 80px;
    text-align: center;
  }
}
.front-container {
  padding: 20px;
}

.main-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 40px;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.carousel-wrapper {
  width: 48%;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 20px;
  box-sizing: border-box;

  @media (max-width: 768px) {
    width: 100%;
    margin-bottom: 20px;
  }
}

.hot-sales-wrapper {
  width: 48%;
  background-color: #f0fff0; // 淡绿色背景
  border-left: 2px solid #d0ffd0;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 128, 0, 0.1);
  box-sizing: border-box;

  h2 {
    color: #2e7d32;
    font-size: 1.5em;
    margin-bottom: 15px;
  }

  p {
    line-height: 1.6;
    color: #333;
  }

  @media (max-width: 768px) {
    width: 100%;
  }
}

.bottom-menu-container {
  background-color:#545c64;
  height: auto;
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.bottom-menu-box {
  width: 280px;
  color: #ffbc49;
  font-size: 20px;
  margin: 10px 40px;
  text-align: center;
}

</style>
